import React, { Component, useState, useRef } from 'react'
import { Steps, Row, Col, Cascader, Form, Input, Button, Checkbox, message } from 'antd';
import { advicecatetory } from "~/index"
import { RichUtils } from 'draft-js';
import RichEditor from '../tiku/experience/richEditor';
import { http } from '../../api';
import data from "../../mobx/data"
const { Step } = Steps;
export default function Advise() {
    const [current, setCurrent] = useState(1)
    let [obj, setObj] = useState(null)
    const form = useRef()
    const [content, setContent] = useState('')
    const next = () => {
        if (current == 1) {
            form.current.validateFields()
                .then(value => {
                    var temp = current + 1
                    setCurrent(temp)
                    setObj(value)
                    console.log(value);
                })
                .catch(err => {
                    message.error("请先完善信息")
                })
        } else if (current == 2) {
            if (current == 2 && content == '') {
                message.error("请填写富文本编辑框")
            } else {
                var temp = current + 1
                setCurrent(temp)
            }
        }
    }
    const prev = () => {
        var temp = current - 1
        setCurrent(temp)
    }
    const createAdvise = () => {
        http.addadvise({
            category: obj.category,
            content: content,
            title: obj.title,
            phone: data.userinfo.phone,
            username: data.userinfo.username
        }).then(res => {
            console.log(res, 22);
        })
    }
    const layout = {
        labelCol: {
            span: 8,
        },
        wrapperCol: {
            span: 16,
        },
    };
    const tailLayout = {
        wrapperCol: {
            offset: 8,
            span: 16,
        },
    };
    const onFinish = (values) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const getContent = (a) => {
        setContent(a)
    }
    return (
        <div style={{ position: "relative", minHeight: "600px" }}>
            <Steps current={current}>
                <Step title="意见类型" description="选择您要提交的意见类型" />
                <Step title="输入您的意见" description="输入您的意见" />
                <Step title="感谢您的建议" description="提交建议" />
            </Steps>
            {
                current == 1 && <Row>
                    <Col>
                        <Form
                            {...layout}
                            name="basic"
                            initialValues={{

                            }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            ref={form}
                        >
                            <Form.Item
                                label="意见标题"
                                name="title"
                                rules={[
                                    {
                                        required: true,
                                        message: '建议标题',
                                    },
                                ]}
                                style={{ marginTop: "30px" }}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="意见分类"
                                name="category"
                                rules={[
                                    {
                                        required: true,
                                        message: '建议类型',
                                    },
                                ]}
                                style={{ marginTop: "60px" }}
                            >
                                <Cascader options={advicecatetory} placeholder="请选择" />
                            </Form.Item>




                        </Form>
                    </Col>
                </Row>
            }
            {
                current == 2 && <RichEditor
                    content={content}
                    getContent={getContent}
                />
            }

            <Row style={{ position: "absolute", left: 0, bottom: 0 }}>
                <Col>
                    {current < 3 && <Button onClick={next} type="primary" style={{ margin: ' 10px' }}>下一步</Button>}
                    {current > 1 && <Button onClick={prev} type="primary" style={{ margin: '10px' }}>上一步</Button>}
                    {current == 3 && <Button onClick={createAdvise} type="danger">提交意见</Button>}
                </Col>
            </Row>
        </div>
    )

}
